<template>


    <div class="container">

        <div class="header">
            <div class="title">科目四</div>

            <div class="more">更多 <van-icon name="arrow" /></div>


        </div>

        <div class="content">

            <div class="menu" v-for="(menu, index) in menus" :key="index">
                <van-image :src="menu.icon" fit="contain"></van-image>
                <p>{{ menu.text }}</p>
            </div>


        </div>


    </div>




</template>

<script setup>
import one from "@/assets/kemu4/1.png";
import two from "@/assets/kemu4/2.png";
import three from "@/assets/kemu4/3.png";
import four from "@/assets/kemu4/4.png";

const menus = [
    { text: '顺序练习', icon: one },
    { text: '章节练习', icon: two },
    { text: '专项练习', icon: three },
    { text: '模拟考试', icon: four }
]



</script>




<style lang="scss" scoped>
.container {
    background-color: #fff !important;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        border-bottom: 1px solid #f0f0f0;

        .title {
            font-size: 16px;
            color: #333;
            font-weight: 700;
        }

        .more {

            font-size: 14px;
            color: #999;
            font-weight: 400;
        }

    }

    .content {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        align-items: center;
        justify-items: center;
        justify-content: center;
        align-content: center;
        gap: 10px; // 网格项之间的间距

        .menu {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: center;
            margin-top: 10px;

            .van-image {
                scale: .6;
            }

            p {
                margin: 0;
                font-size: 14px;
                color: #333;
            }
        }
    }

}
</style>